<template>
	<view class="modify">
		<view class="nav-box">
			<navigator 
			open-type="redirect" 
			class="iconfont icon-fanhui  icon-box"
			url="/pages/changeInfo/changeInfo">
			</navigator>
		
			<view class="title">
				{{title}}
			</view>
		</view>
		<view class="box">
			<view class="text">
				{{text}}
			</view>
			<view v-if=" title=== '修改昵称' " class="input-name">
				<input class="input" type="text"  maxlength="20" v-model="newName"  placeholder="记得填写昵称"/>
				<icon class="iconfont  icon-chahao  delete" @click="deleteAll"></icon>
				<view class="number">
					{{newName.length}}/20
				</view>
				<view class="footer" @click="saveName(newName)">
					保存
				</view>
			</view>
			
			<view v-if=" title=== '修改抖音号' " class="input-name">
				<input class="input" type="text"  maxlength="16" v-model="newId" />
				<icon class="iconfont  icon-chahao  delete" @click="deleteAll"></icon>
				<view class="number">
					最多16个字，只允许包含字母、数字、下滑线和点，三十天内只能修改一次。
				</view>
				<view class="footer" @click="saveId(newId)">
					保存
				</view>
			</view>
			
			<view v-if=" title=== '修改简介' " class="input-name">
				<textarea  v-model="intrductionText" class="text-area" placeholder="填写个人简介更容易获得别人的关注哦"></textarea>
				<view class="footer" @click="saveText(intrductionText)">
					保存
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		// props:['title'],
		data() {
			return {
				newName:"The Rong",
				newId:  'sdcasdca1234',
				title:'',
				text:'',
				intrductionText:''
			}
		},
		onLoad(res){
			// console.log(res.title)
			switch(res.title){
				case "userName":
				this.title="修改昵称"
				this.text="我的昵称"
					break;
				case "douyinId":
				this.title="修改抖音号"
				this.text="我的抖音号"
					break;
			    case "intrduction":
			    this.title="修改简介"
			    this.text="个人简介"
			    	break;		
				default:
					break;
			}
			
		},
		methods: {
			deleteAll(){
				this.newName=''
			},
			saveName(res){
				// console.log(123)
				uni.setStorage({
					key:'userName',
					data:res,
					success() {
						// console.log("昵称已保存到缓存")
					}
				})
			},
			saveId(res){
				// console.log(123)
				uni.setStorage({
					key:'userId',
					data:res,
					success() {
						// console.log("抖音号已保存到缓存")
					}
				})
			},
			saveText(res){
				// console.log(123)
				uni.setStorage({
					key:'intrduction',
					data:res,
					success() {
						// console.log("个人简介已保存到缓存")
					}
				})
			}
		}
	}
</script>

<style>
	.modify{
		width: 100%;
		height: 100%;
		background: #000000;
	}
	.nav-box{
		height: 50px;
		position: relative;
		padding-top: 30px;
		margin: 0 auto;
	}
	.icon-box{
		position: absolute;
		top:30px;
		left:10px;
		font-size: 15px;
		color: #FFFFFF;
	}
	.title{
		text-align: center;
		font-size: 16px;
		color: #FFFFFF;
	}
	.text{
		margin-left: 20px;
		color: #999999;
		font-size: 15px;
	}
	.input-name{
		margin-top:10px;
		font-size: 18px;
		position: relative;
	}
	.input{
		width: 88%;
		margin-left: 20px;
		font-size: 17px;
		color: #FFFFFF;
	}
	.delete{
		position: absolute;
		right: 20px;
		top:0;
		width: 5%;
		height: 20px;
		font-size: 20px;
		color:#999999;
	}
	.number{
		color: #999999;
		font-size: 12px;
		margin-left: 20px;
		margin-top: 8px; 
	}
	.footer{
		width: 80%;
		text-align: center;
		margin:50px auto;
		font-size: 18;
		color:#FFFFFF;
		background: #333333;
		border-radius:  3px;
		height: 40px;
		line-height: 40px;
	}
	.text-area{
		width: 88%;
		background: #333333;
		color:#FFFFFF;
		margin-left: 20px;
	}
	

</style>
